import Map from 'ol/Map'
import './style.css'
import 'ol/ol.css'
import View from 'ol/View'
import { Vector, XYZ } from 'ol/source'
import TileLayer from 'ol/layer/Tile'
import Feature from 'ol/Feature'
import { Point } from 'ol/geom'
import VectorLayer from 'ol/layer/Vector'
import Style from 'ol/style/Style'
import CircleStyle from 'ol/style/Circle.js'
import Fill from 'ol/style/Fill'

const target = 'map'

const view = new View({
    // 南京经纬度
    center: [118.796877, 32.060255],
    zoom: 10,
    projection: 'EPSG:4326'
})

const layers = [new TileLayer({
    source: new XYZ({
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
    })
})]

const map = new Map({
    target,
    view,
    layers
})

// 通过 ol 中提高的要素

// 创建要素（二维中要素主要是：点 线 面）并且将要素绘制到底图上 feature => 1. 几何形状 2.属性信息

// 2. 创建一个矢量源，将这个点要素添加到矢量源中
const iconSource = new Vector({
    features: []
})

// 3. 创建一个矢量图层，将矢量源添加到矢量图层中
const iconLayer = new VectorLayer({
    source: iconSource
})

// 4. 将矢量图层添加到地图中
map.addLayer(iconLayer)

// 添加点击事件
map.on('click', function(e) {
    // 获取点击的坐标
    const coordinate = e.coordinate
    // 根据点击的坐标创建要素
    const feature = new Feature({
        geometry: new Point(coordinate)
    })
    feature.setStyle(new Style({
        image: new CircleStyle({
            fill: new Fill({
                color: 'green'
            }),
            radius: 10
        })
    }))
    // 将要素添加到矢量源中
    iconSource.addFeature(feature)
})